'use server';
import { Avatar, Button, Card } from 'antd';
import './index.css';
import React from 'react';
import Meta from 'antd/es/card/Meta';
import Paragraph from 'antd/es/typography/Paragraph';
import Title from 'antd/es/typography/Title';
import QuestionList from '@/components/QuestionList';
import { queryBankDetailByIdUsingGet } from '@/api/BankApi';

/**
 * 题库详情
 * @constructor
 */
export default async function BankPage({ params }) {
  const { bankId } = params;
  let bank = undefined;
  try {
    const res = await queryBankDetailByIdUsingGet({
      id: bankId,
    });
    bank = res.data;
  } catch (e) {
    console.error('Failed to fetch bank list:', e);
  }

  if (!bank) {
    return <div>获取题库详情失败，请刷新重试</div>;
  }

  let firstQuestionId = undefined;
  if (bank.questionList.length > 0) {
    firstQuestionId = bank.questionList[0].id;
  }

  return (
    <div id="bank-page" className="max-width-content">
      <Card style={{ marginBottom: 20 }}>
        <Meta
          avatar={<Avatar src={bank.picture} size={72} />}
          title={
            <Title level={3} style={{ marginBottom: 0 }}>
              {bank.title}
            </Title>
          }
          description={
            <>
              <Paragraph type="secondary">{bank.description}</Paragraph>
              <Button
                type="primary"
                shape="round"
                href={`/bank/${bankId}/question/${firstQuestionId}`}
              >
                开始刷题
              </Button>
            </>
          }
        />
      </Card>
      <QuestionList
        bankId={bankId}
        questionList={bank.questionList}
        cardTitle={`题目列表(${bank.questionTotal})`}
      />
    </div>
  );
}
